<template>
  <div class="hot-search-display">
    <van-search
      ref="search"
      v-model="value"
      show-action
      placeholder="请输入搜索关键词"
      shape="round"
      @click="onSearch"
      @cancel="onCancel"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>

    <!-- 热门搜索 标题-->
    <div class="search-content">
      <h3>热门搜索</h3>
      <div class="search-title">
        <div v-for="item in search" :key="item.id" @click="click(item.title)">
          <p>{{ item.title }}</p>
        </div>
      </div>
    </div>
    <!-- 没有 图片-->
    <div class="noCommodity" v-if="product">
      <img
        v-if="product.length == 0"
        src="https://java.crmeb.net/static/img/noSearch.73260101.png"
        alt=""
      />
      <div class="product-item" v-for="item in product" :key="item.id" v-else>
        <img :src="item.image" alt="" />
        <div class="pro-right">
          <h3>{{ item.storeName }}</h3>
          <div class="pro-bottom">
            <span><em>￥</em>{{ item.price }}</span>
            <p>已售{{ item.ficti + item.sales }}{{ item.unitName }}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 保证product存在 因为初始值是null 是false 所以应该！product  这样为真-->
    <hot-search v-show="!product || product.length === 0" />
    <!-- <hot-search></hot-search> -->
  </div>
</template>

<script>
import HotSearch from "@/components/HotSearch.vue";
export default {
  name: "SearchInfo",

  data() {
    return {
      value: "",
      search: [], // 热门搜索
      product: null, // 搜索结果列表
    };
  },

  methods: {
    click(title) {
      this.value = title;
      this.onSearch();
    },
    onSearch() {
      // console.log("搜索");
      if (this.value) {
        this.$requestTools(
          `https://apif.java.crmeb.net/api/front/products?keyword=${this.value}`,
          "GET",
          {
            params: {
              page: 1,
              limit: 8,
            },
          }
        ).then((data) => {
          this.product = data.data.data.list;
          console.log(this.product);
        });
      } else {
        alert("请输入关键字");
      }
    },
    onCancel() {
      console.log(1111);
    },
  },
  async created() {
    /* 测试 衣服 鞋子 叶子 等标题标签 */
    const {
      data: { data },
    } = await this.$requestTools(
      "https://apif.java.crmeb.net/api/front/search/keyword",
      "GET",
      { params: {} }
    );
    this.search = data;
  },
  mounted() {
    // 组件自动聚焦
    this.$ref.search.getElementsByClassName("van-field__control")[0].focus();
  },
  components: {
    HotSearch,
  },
};
</script>

<style lang="scss" scoped>
.hot-search-display {
  padding: 0 10px;
  background-color: #fff;
  .search-content {
    h3 {
      font-weight: normal;
      font-size: 14px;
      color: #999;
      margin: 25px 15px 12px 15px;
    }
    .search-title {
      margin-top: 10px;
      display: flex;
      justify-content: space-around;
      div {
        p {
          font-size: 12px;
          color: #454545;
          padding: 0 10px;
          height: 26px;
          border-radius: 26px;
          line-height: 26px;
          border: 1px solid #aaa;
          margin: 0 0 10px 10px;
        }
      }
    }
  }
  .noCommodity {
    img {
      display: block;
      width: 207px;
      height: 168px;
      margin: 0 auto;
    }
    .product-item {
      display: flex;
      justify-content: space-between;
      img {
        width: 88px;
        height: 88px;
      }
      .pro-right {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding:10px;
        h3 {
          font-size: 14px;
          font-weight: normal;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }
        .pro-bottom {
          span {
            font-size: 18px;
            color: #ff448f;
            em {
              font-style: normal;
              font-size: 12px;
            }
          }
          p {
            font-size: 12px;
            color: gray;
          }
        }
      }
    }
  }
}
</style>
